<div>
    <div class="content d-flex flex-column flex-column-fluid">
        <sub-header [title]="'SoftwareEdit' | localize" [description]="software?.id+' | '+software?.name">
            <div action="back"><i class="icon-fanhui text-info" (click)="back()"></i></div>
            <div role="actions"></div>
        </sub-header>

        <div [class]="containerClass">
            <div class="card card-custom gutter-b">
                <div class="card-body">
                    <tabset class="tab-container tabbable-line">
                        <tab class="pt-5" heading="{{l('BaseMsg')}}" customClass="kt-tabs__item" *ngIf="appSession.tenantId==null">
                            <form #baseForm="ngForm" novalidate name="AppsForm" (ngSubmit)="save()" autocomplete="off">
                                <div class="form-row">
                                    <div class="col-4">
                                        <div class="form-group m-form__group">
                                            <label class="control-label">{{l("Picture")}}</label>
                                            <app-fileupload [fileUrl]="software.largeImageUrl"
                                                (onUpLoadEvent)="onUploadPic($event)"
                                                (onBeforeSendEvent)="onBeforeSend($event)"></app-fileupload>
                                        </div>
                                        <div class="form-group m-form__group">
                                            <label class="control-label">{{l("icon")}}</label>
                                            <app-fileupload [fileUrl]="software.logoUrl"
                                                (onUpLoadEvent)="onUploadIcon($event)"
                                                (onBeforeSendEvent)="onBeforeSend($event)"></app-fileupload>
                                        </div>
                                    </div>
                                    <div class="col-8">
                                        <div class="form-row">
                                            <div class="form-group col-6">
                                                <label>{{l("AppName")}}*</label>
                                                <input #nameInput="ngModel" class="form-control" type="text" name="name"
                                                    [(ngModel)]="software.name" required maxlength="32">
                                                <validation-messages [formCtrl]="nameInput"></validation-messages>
                                            </div>
                                            <div class="form-group col-6">
                                                <label>{{l("versionNumber")}}</label>
                                                <input #versionNumberInput="ngModel" class="form-control" type="text"
                                                    name="versionNumber" [(ngModel)]="software.versionNumber"
                                                    maxlength="12">
                                                <validation-messages [formCtrl]="versionNumberInput">
                                                </validation-messages>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-6">
                                                <label>{{l("Language")}}</label>
                                                <input #nameInput="ngModel" class="form-control" type="text"
                                                    name="language" [(ngModel)]="software.language" maxlength="32">
                                                <validation-messages [formCtrl]="nameInput"></validation-messages>
                                            </div>
                                            <div class="form-group col-6">
                                                <label>{{l("type")}}*</label>
                                                <select #typeInput="ngModel" class="form-control" name="type" required
                                                    [(ngModel)]="software.type">
                                                    <option [value]="type"
                                                        *ngFor="let type of CreateSoftwareInputTypes">
                                                        {{type}}</option>
                                                </select>
                                                <validation-messages [formCtrl]="typeInput"></validation-messages>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-6">
                                                <label>{{l("code")}}*</label>
                                                <input #codeInput="ngModel" class="form-control" type="text" name="code"
                                                    [(ngModel)]="software.code" readonly maxlength="32">
                                                <validation-messages [formCtrl]="codeInput"></validation-messages>
                                            </div>
                                            <div class="form-group col-6">
                                                <label>{{l("uploadFilePackage")}}</label>
                                                <form name="packageUrlForm" id="packageUrlForm" novalidate>
                                                    <div class="input-group">
                                                        <input class="form-control" type="file" id="packageUrlfile"
                                                            hidden name="fileUrl" multiple="false"
                                                            (change)="uploadFile($event)">
                                                        <input class="form-control" type="text" name="packageUrl"
                                                            [(ngModel)]="software.packageUrl">
                                                        <span class="input-group-btn">
                                                            <label for="packageUrlfile" style="margin-bottom: 0px;"
                                                                class="btn btn-primary">{{software?.packageUrl?l('Edit'):l('add')}}</label>
                                                            <button *ngIf="software?.packageUrl" class="btn btn-primary"
                                                                (click)="resetResource()">{{l('Delete')}}</button>
                                                        </span>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <div class="progress" *ngIf="progress">
                                                        <div class="progress-bar progress-bar-info progress-bar-striped"
                                                            role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                                            aria-valuemax="100" [ngStyle]="{width: progress+'%'}">
                                                            <span class="sr-only">{{progress}}% Complete</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-6">
                                                <label>{{l("Author")}}</label>
                                                <input #ownerInput="ngModel" class="form-control" type="text"
                                                    name="owner" [(ngModel)]="software.owner" maxlength="32">
                                                <validation-messages [formCtrl]="ownerInput"></validation-messages>
                                            </div>
                                            <div class="form-group col-6">
                                                <label>{{l("runningEnver")}}</label>
                                                <select #envTypeInput="ngModel" class="form-control" name="envType"
                                                    [(ngModel)]="software.envType">
                                                    <option [value]="type"
                                                        *ngFor="let type of CreateSoftwareInputEnvTypes">
                                                        {{type}}</option>
                                                </select>
                                                <validation-messages [formCtrl]="envTypeInput"></validation-messages>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-6">
                                                <label>{{l("resolution")}}</label>
                                                <input #resolutionInput="ngModel" pattern="^\d+\*\d+$"
                                                    class="form-control" type="text" name="resolution"
                                                    [(ngModel)]="software.resolution" maxlength="32">
                                                <validation-messages [formCtrl]="resolutionInput"></validation-messages>
                                            </div>
                                            <div class="form-group col-6" *ngIf="software.envType!='H5Screen'">
                                                <label>{{l("AppUri")}}</label>
                                                <input #AppUriInput="ngModel" class="form-control" type="text"
                                                    name="exePath" [(ngModel)]="software.exePath">
                                                <validation-messages [formCtrl]="AppUriInput"></validation-messages>
                                            </div>
                                            <div class="form-group col-6" *ngIf="software.envType=='H5Screen'">
                                                <label>{{l("UrL")}}</label>
                                                <input #UrLInput="ngModel" class="form-control" type="text" name="url"
                                                    [(ngModel)]="software.url">
                                                <validation-messages [formCtrl]="UrLInput"></validation-messages>
                                            </div>

                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-6">
                                                <label>{{l("appsetting")}}</label>
                                                <textarea class="form-control" style="height: 200px;" type="text"
                                                    name="setting" [(ngModel)]="software.setting"></textarea>
                                            </div>
                                            <div class="form-group col-6">
                                                <label>{{l("description")}}</label>
                                                <textarea class="form-control" style="height: 200px;" type="text"
                                                    name="description" [(ngModel)]="software.description"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-6" style="position:relative;">
                                                <label class="checkbox checkbox-primary"
                                                    style="position:absolute;top:50%;">
                                                    <input [(ngModel)]="software.isShowToTenant"
                                                        type="checkbox" name="isShowToTenant" />{{l("isShowToTenant")}}
                                                    <span></span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12" style="text-align: right;">
                                    <button type="button" class="btn btn-primary"
                                        (click)="back()">{{l('back')}}</button>
                                    <button type="submit" class="btn btn-primary blue" [disabled]="!baseForm.form.valid"
                                        [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                                        <i class="fa fa-save"></i>
                                        <span>{{l("Save")}}</span>
                                    </button>
                                </div>
                            </form>
                        </tab>
                        <tab class="pt-5" heading="{{l('AuthList')}}" customClass="kt-tabs__item" *ngIf="appSession.tenantId==null"
                            (selectTab)="getAuthList()">
                            <div class="row align-items-center">
                                <form class="horizontal-form" autocomplete="off" name="devicesForm">
                                    <div class="m-form">
                                        <div class="row align-items-center mb-4">
                                            <div class="col-4">
                                                <div class="form-group m-form__group align-items-center">
                                                    <div class="input-group">
                                                        <input [(ngModel)]="filterText" name="filterText"
                                                            (keyup.enter)="getAuthList()" autoFocus
                                                            class="form-control m-input" [placeholder]="l('name')"
                                                            type="text">
                                                        <span class="input-group-btn">
                                                            <button (click)="getAuthList()" class="btn btn-primary"
                                                                type="submit">
                                                                <i class="icon-sousuo-sousuo"></i>
                                                            </button>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-8" style="text-align: right;">
                                                <div class="form-group">
                                                    <button type="button" class="btn btn-primary icon-add"
                                                        (click)="addAuth()">{{l('add')}}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>

                                <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                    <!-- resizableColumns="primengTableHelper.resizableColumns" -->
                                    <p-table #dataTable (onLazyLoad)="getAuthList($event)"
                                        [value]="primengTableHelper.records"
                                        [rows]="primengTableHelper.defaultRecordsCountPerPage" [paginator]="false"
                                        [lazy]="false" [resizableColumns]="primengTableHelper.resizableColumns"
                                        [responsive]="primengTableHelper.isResponsive">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th>{{l('Actions')}}</th>
                                                <th style="width:5%">{{l('RecordId')}}</th>
                                                <th>{{l('tenantName')}}</th>
                                                <th>{{l('endTime')}}</th>
                                                <th>{{l('startTime')}}</th>
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-record let-i="rowIndex">
                                            <tr>
                                                <td>
                                                    <div class="btn-group dropdown" dropdown normalizePosition>
                                                        <button class="dropdown-toggle btn btn-sm btn-primary"
                                                            data-toggle="dropdown" dropdownToggle aria-haspopup="true"
                                                            aria-expanded="false">
                                                            <i class="fa fa-cog"></i>
                                                            <span class="caret"></span> {{l("Actions")}}
                                                        </button>
                                                        <ul class="dropdown-menu" *dropdownMenu>
                                                            <li>
                                                                <a class="icon-bianji dropdown-item"
                                                                    (click)="editAuthRecord(record)">{{l('Edit')}}</a>
                                                            </li>
                                                            <li>
                                                                <a class="icon-icon-test dropdown-item"
                                                                    (click)="deleteAuthRecord(record)">{{l('Delete')}}</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </td>
                                                <td> {{transIndex(i)}}</td>
                                                <td>
                                                    <span>{{record.tenantName}}</span>
                                                </td>
                                                <td> {{record.endTime | date :'yyyy-MM-dd hh:mm'}}</td>
                                                <td>{{record.startTime | date :'yyyy-MM-dd hh:mm'}}</td>
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="emptymessage" let-records>
                                            <tr *ngIf="primengTableHelper.records">
                                                <td colspan="5">
                                                    <img class="emptymessage"
                                                        src="/assets/common/images/placeholder/appHolder.png" />
                                                </td>
                                            </tr>
                                        </ng-template>
                                    </p-table>
                                    <div class="primeng-paging-container">
                                        <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                            (onPageChange)="getAuthList($event)"
                                            [totalRecords]="primengTableHelper.totalRecordsCount"
                                            [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                        </p-paginator>
                                        <span class="total-records-count">
                                            {{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </tab>
                    </tabset>
                </div>
            </div>
        </div>
    </div>
    <SoftwareAuth #SoftwareAuth (modalSave)="getAuthList()"></SoftwareAuth>